<template>
  <div class="v-star">
    <img
      v-for="item in c_on"
      src="../../assets/images/star36_on@2x.png"
      alt=""
    />
    <img v-if="c_half" src="../../assets/images/star36_half@2x.png" alt="" />
    <img
      v-for="item in c_off"
      src="../../assets/images/star36_off@2x.png"
      alt=""
    />
  </div>
</template>
<script>
export default {
  name: "vstar",
  data() {
    return {};
  },
  computed: {
    c_on() {
      return Math.floor(this.starnumber);
    },
    c_half() {
      return this.starnumber % 1 >= 0.5;
    },
    c_off() {
      if (this.c_half) {
        return 5 - Math.floor(this.starnumber) - 1;
      } else {
        return 5 - Math.floor(this.starnumber);
      }
    }
  },
  props: {
    starnumber: {
      type: Number,
      required: true
    }
  },
  methods: {}
};
</script>
<style scoped>
</style>